<template>
  <div class="right-content-container">

    <div class="left-list-container" :style="{ width: leftWidth + 'px' }">
      <slot name="left"></slot>
    </div>

    <div
      class="resize-handle no-drag"
      @mousedown="startResize"
    ></div>

    <div class="right-detail-container">
      <slot name="right"></slot>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// Props for configurable min/max values (百分比控制)
const props = defineProps({
  minWidthPercent: {
    type: Number,
    default: 15 // 最小宽度15%
  },
  maxWidthPercent: {
    type: Number,
    default: 50 // 最大宽度50%
  },
  defaultWidthPercent: {
    type: Number,
    default: 25 // 默认宽度25%
  }
})

// 响应式宽度（像素值）
const leftWidth = ref(0)
const isResizing = ref(false)

// 初始化宽度
onMounted(() => {
  const container = document.querySelector('.right-content-container')
  if (container) {
    const containerWidth = container.getBoundingClientRect().width
    leftWidth.value = (containerWidth * props.defaultWidthPercent) / 100
  }
})

// 鼠标事件处理
const startResize = () => {
  isResizing.value = true
  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  document.body.style.cursor = 'col-resize'
  document.body.style.userSelect = 'none'
}

const handleResize = (e) => {
  if (!isResizing.value) return

  const container = document.querySelector('.right-content-container')
  const rect = container.getBoundingClientRect()
  const newWidth = e.clientX - rect.left
  const containerWidth = rect.width

  // 计算百分比
  const newWidthPercent = (newWidth / containerWidth) * 100

  // 应用最小/最大百分比约束
  if (newWidthPercent >= props.minWidthPercent && newWidthPercent <= props.maxWidthPercent) {
    leftWidth.value = newWidth
  }
}

const stopResize = () => {
  isResizing.value = false
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
  document.body.style.cursor = ''
  document.body.style.userSelect = ''
}

// Cleanup on unmount
onUnmounted(() => {
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
})
</script>



<style scoped lang="less">
.right-content-container {
  width: 100%;
  height: 100%;
  display: flex;

  .left-list-container {
    height: 100%;
    //border-right: 1px #dfdfdf solid;
    flex-shrink: 0;
    min-width: 180px;
  }

  .resize-handle {
    width: 1px;
    height: 100%;
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    background-color: #dfdfdf;

    &:hover {
      background-color: #bbb;
    }

    &:active {
      background-color: #999;
    }
  }

  .right-detail-container {
    flex: 1;
    min-width: 0; // Prevent flex item from overflowing
  }
}
</style>
